<template>
  <div class="activityCard">
    <div class="activityCard-cover">
      <img :src="activityCover"/>
      <div class="activityCard-getTo" @click="toHere" v-if="toHereButton">
        <van-icon class-prefix="aliIconfont" name="icon-position-mark" size="50px"/>
        <span>到这去</span>
      </div>
    </div>
    <div :class="{'activityCard-content':true,'activityCard-content-smallMode':size == 'small'}">
      <div class="activityCard-content-item">
        <div class="activityCard-content-item-title">
          <h3>社团：</h3>
        </div>
        <div class="activityCard-content-item-value">
          {{club.clubName}}
        </div>
      </div>
      <div class="activityCard-content-item">
        <div class="activityCard-content-item-title">
          <h3>内容：</h3>
        </div>
        <div class="activityCard-content-item-value">
          {{content}}
        </div>
      </div>
      <div class="activityCard-content-item">
        <div class="activityCard-content-item-title">
          <h3>活动地址：</h3>
        </div>
        <div class="activityCard-content-item-value">
          {{positionDetail}}
        </div>
      </div>
      <div class="activityCard-content-item">
        <div class="activityCard-content-item-title">
          <h3>开始时间：</h3>
        </div>
        <div class="activityCard-content-item-value">
          {{startTime}}
        </div>
      </div>
      <div class="activityCard-content-item">
        <div class="activityCard-content-item-title">
          <h3>结束时间：</h3>
        </div>
        <div class="activityCard-content-item-value">
          {{endTime}}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {Icon} from "vant";
export default {
  components:{
    [Icon.name]:Icon
  },
  props:['activityCover','content','club','startTime','endTime','size','positionDetail','position','toHereButton'],
  methods:{
    toHere(){
      this.$emit('toHere',{
        pos:this.position,
        club:this.club
      })
    }
  }
}
</script>
<style lang="less">
.activityCard{
  margin: 8px;
  .activityCard-cover{
    max-height: 210px;
    position: relative;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .activityCard-content{
    padding-bottom: 8px;
    border-left: 8px solid orange;
    .activityCard-content-item{
      display: flex;
      align-items: center;
      >div{
        h3{
          padding: 0;
          margin: 4px 0;
        }
        &:nth-child(1){
          width: 100px;
          text-align: left;
          padding-left: 8px;
        }
        &:nth-child(2){
          text-align: left;
          margin: 4px 0;
          flex:1
        }
      }
    }
  }
  .activityCard-content-smallMode{
    transform: translateY(-100px);
    background: #fff;
    position: relative;
    margin-bottom: -100px;
    &::before{
      content:"";
      position: absolute;
      left: -8px;
      top: -110px;
      height: 111px;
      width: 100%;
      border-radius: 0 100% 0 0 / 0 100% 0 0;
      border-left: 8px solid orange;
      background:linear-gradient(-180deg,rgba(255, 255, 255, 0.7),#fff)
    }
  }
  .activityCard-getTo{
    position: absolute;
    content:'';
    left: 0;
    top: 0;
    z-index: 111;
    transform: translate(20%,100%);
    color:skyblue;
    span{
      color:gray;
      font-weight: 800;
    }
  }
}
</style>